<template>
  <el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增' : '编辑'" width="700px">
    <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
      <el-col :xs="24" :sm="24" :lg="11">
        <el-form-item label="工号" prop="workerId">
          <el-input v-model="form.workerId" class="form_input"/>
        </el-form-item>
        <el-form-item label="卡号" prop="cartNum">
          <el-input v-model="form.cartNum" class="form_input"/>
        </el-form-item>
        <el-form-item label="姓名" prop="workerName">
          <el-input v-model="form.workerName" class="form_input"/>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="form.idNum" class="form_input"/>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.telNum" class="form_input"/>
        </el-form-item>
        <el-form-item label="部门" prop="deptId">
          <treeselect v-model="form.deptId" :options="dict.deptTree" class="form_input" :defaultExpandLevel="9"
                      placeholder="选择上级类目"/>
        </el-form-item>
        <el-form-item label="职位">
          <el-select v-model="form.jobId" class="form_input" placeholder="请选择">
            <el-option
              v-for="(item, index) in dict.job"
              :key="item.name + index"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="登记时间">
          <!--<el-input v-model="form.registrationTime"  class="form_input"/>-->
          <el-date-picker
            v-model="form.registrationTime"
            type="datetime"
            placeholder="选择日期时间"
            class="form_input"/>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="车牌">
          <el-input v-model="form.carNum" class="form_input"/>
        </el-form-item>
        <el-form-item label="备注1">
          <el-input v-model="form.remark1" class="form_input"/>
        </el-form-item>
        <el-form-item label="备注2">
          <el-input v-model="form.remark2" class="form_input"/>
        </el-form-item>
        <el-form-item label="备注3">
          <el-input v-model="form.remark3" class="form_input"/>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="13">
        <el-col :xs="24" :sm="24" :lg="24">
          <el-tabs value="first">
            <el-tab-pane label="身份证正面" name="first">
              <el-upload
                class="avatar-uploader"
                :headers="headers"
                :action="imagesUploadApi"
                :show-file-list="false"
                :on-progress="uploadProcessId1"
                :on-success="handleId1Success"
                :before-upload="beforeAvatarUpload">
                <img v-if="form.idPic1&&uploadFlagId1==false" :src="form.idPic1" class="id_img">
                <i v-else-if="!form.idPic1&&uploadFlagId1==false" class="el-icon-plus id-uploader-icon"></i>
                <el-progress v-if="uploadFlagId1 == true" type="circle" :percentage="uploadPercentId1"
                             style="margin-top:40px;"></el-progress>
              </el-upload>
            </el-tab-pane>
            <el-tab-pane label="身份证反面" name="second">
              <el-upload
                class="avatar-uploader"
                :headers="headers"
                :action="imagesUploadApi"
                :show-file-list="false"
                :on-progress="uploadProcessId2"
                :on-success="handleId2Success"
                :before-upload="beforeAvatarUpload">
                <img v-if="form.idPic2&&uploadFlagId2==false" :src="form.idPic2" class="id_img">
                <i v-else-if="!form.idPic2&&uploadFlagId2==false" class="el-icon-plus id-uploader-icon"></i>
                <el-progress v-if="uploadFlagId2 == true" type="circle" :percentage="uploadPercentId2"
                             style="margin-top:40px;"></el-progress>
              </el-upload>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-button :loading="loading" type="primary" size="mini" class="id_button" @click="getIdImg">读二代</el-button>
          <el-col :xs="24" :sm="24" :lg="24" style="height: 40px;padding: 10px 20px;color: #303133;">
            <span style="padding: 10px 0px">考勤照片</span>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="24">
            <el-upload
              class="avatar-uploader"
              :headers="headers"
              :action="imagesUploadApi"
              :show-file-list="false"
              :on-progress="uploadProcess"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="form.facePic&&uploadFlag==false" :src="form.facePic" class="avatar">
              <i v-else-if="!form.facePic&&uploadFlag==false" class="el-icon-plus avatar-uploader-icon"></i>
              <el-progress v-if="uploadFlag == true" type="circle" :percentage="uploadPercent"
                           style="margin-top:40px;"></el-progress>
            </el-upload>
          </el-col>
      </el-col>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {add, edit, getIdImg} from '@/api/worker'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import {mapGetters} from 'vuex'
  import {getToken} from '@/utils/auth'
  export default {
    components: {Treeselect},
    props: {
      isAdd: {
        type: Boolean,
        required: true
      },
      sup_this: {
        type: Object,
        default: null
      },
      dict: {
        type: Object,
        required: true
      }
    },
    computed: {
      ...mapGetters([
        'imagesUploadApi'
      ])
    },
    data() {
      return {
        headers: {
          'Authorization': 'Bearer ' + getToken()
        },
        loading: false, dialog: false,
        uploadFlag: false,
        uploadPercent: 0,
        uploadFlagId1: false,
        uploadPercentId1: 0,
        uploadFlagId2: false,
        uploadPercentId2: 0,
        form: {
          id: '',
          workerId: '',
          cartNum: '',
          workerDeviceNum: '',
          workerName: '',
          idNum: '',
          telNum: '',
          deptId: null,
          jobId: '',
          registrationTime: '',
          carNum: '',
          remark1: '',
          remark2: '',
          remark3: '',
          idPic1: '',
          idPic2: '',
          facePic: ''
        }
        , rules: {
          workerId: [
            {required: true, message: '请输入工号', trigger: 'blur'}
          ],
          cartNum: [
            {required: true, message: '请输入卡号', trigger: 'blur'}
          ],
          facePic: [
            {required: true, message: '请上传考勤头像', trigger: 'blur'}
          ],
          workerName: [
            {required: true, message: '请输入姓名', trigger: 'blur'}
          ],
          jobId: [
            {required: true, message: '请选择职位', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      getIdImg(){
        this.$nextTick(() => {
          getIdImg().then(res => {
            console.log(res)
            this.form.idPic1 = res.idPic1;
            this.form.idPic2 = res.idPic2;
          }).catch(err => {
            console.log(err.response.data.message)
          })
        })
      },
      handleAvatarSuccess(res, file) {
        this.uploadFlag = false;
        this.uploadPercent = 0;
        this.form.facePic = res.data;
      },
      handleId2Success(res, file) {
        this.uploadFlagId2 = false;
        this.uploadPercentId2 = 0;
        this.form.idPic2 = res.data;
      },
      handleId1Success(res, file) {
        this.uploadFlagId1 = false;
        this.uploadPercentId1 = 0;
        this.form.idPic1 = res.data;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      uploadProcess(event, file, fileList){
        this.uploadFlag = true;
        this.uploadPercent = file.percentage.toFixed(0) * 1;

      },
      uploadProcessId1(event, file, fileList){
        this.uploadFlagId1 = true;
        this.uploadPercentId1 = file.percentage.toFixed(0) * 1;

      },
      uploadProcessId2(event, file, fileList){
        this.uploadFlagId2 = true;
        this.uploadPercentId2 = file.percentage.toFixed(0) * 1;
      },
      cancel() {
        this.resetForm()
      },
      doSubmit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.loading = true
            if (this.isAdd) {
              this.doAdd()
            } else this.doEdit()
          } else {
            return false;
          }
        })
      },
      doAdd() {
        add(this.form).then(res => {
          this.resetForm()
          this.$notify({
            title: '添加成功',
            type: 'success',
            duration: 2500
          })
          this.loading = false
          this.sup_this.init()
        }).catch(err => {
          this.loading = false
          console.log(err.response.data.message)
        })
      },
      doEdit() {
        edit(this.form).then(res => {
          this.resetForm()
          this.$notify({
            title: '修改成功',
            type: 'success',
            duration: 2500
          })
          this.loading = false
          this.sup_this.init()
        }).catch(err => {
          this.loading = false
          console.log(err.response.data.message)
        })
      },
      resetForm() {
        this.dialog = false
        this.$refs['form'].resetFields()
        this.form = {
          id: '',
          workerId: '',
          cartNum: '',
          workerDeviceNum: '',
          workerName: '',
          idNum: '',
          telNum: '',
          deptId: null,
          jobId: '',
          registrationTime: '',
          carNum: '',
          remark1: '',
          remark2: '',
          remark3: '',
          idPic1: '',
          idPic2: '',
          facePic: '',
          creator: '',
          createTime: '',
          updator: '',
          updateTime: ''
        }
      }
    }
  }
</script>

<style scoped>
  .form_input {
    width: 190px;
  }

  .form_input_row {
    width: 455px;
  }

  .id_img {
    height: 201px;
    width: 320px;
  }

  .pic_img {
    height: 245px;
    width: 175px;
  }

  .face_div {
    text-align: right;
    height: 245px;
  }

  .face_button {
    margin-top: 60px;
    text-align: right;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9 !important;
    border-radius: 6px !important;;
    cursor: pointer !important;;
    position: relative !important;;
    overflow: hidden !important;;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9 !important;
    font-size: 28px;
    color: #8c939d;
    width: 125px;
    height: 175px;
    line-height: 175px;
    text-align: center;
  }

  .avatar {
    width: 125px;
    height: 175px;
    display: block;
  }

  .id-uploader-icon {
    border: 1px dashed #d9d9d9 !important;
    font-size: 28px;
    color: #8c939d;
    width: 320px;
    height: 201px;
    line-height: 201px;
    text-align: center;
  }

  .id_button {
    float: left;
    margin-left: 128px;
  }
</style>
